<template>
  <div class="hotelSearch">
    <el-form :inline="true" v-model="form">
      <el-form-item>
        <el-autocomplete
          v-model="form.city"
          placeholder="切换城市"
          :fetch-suggestions="querySearch"
          @select="handleSelect"
          :trigger-on-focus="false"
          :highlight-first-item="true"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="form.enterTime"
          type="daterange"
          range-separator="-"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input-number v-model="form.person" controls-position="right" :min="1" :max="7"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlePrice">查看价格</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      form: {
        city: "",
        enterTime: null,
        person: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  methods: {
    querySearch(val, callback) {
      this.searchCity().then((res) => {
        callback(res);
      });
    },
    handleSelect(val) {
      this.$store.commit("hotel/setPositionCity", val.value);
      this.$router.push({ query: { cityName: val.value } });
      this.$emit("sendForm");
    },
    searchCity() {
      return this.$axios({
        url: "/cities",
        params: {
          name: this.form.city,
        },
      }).then((res) => {
        var result = res.data.data.map((item) => {
          return {
            value: item.name,
          };
        });
        return result;
      });
    },
    handlePrice() {
      var obj = [];
      // if (this.form.person) {
      //   obj.push({ person: this.form.person });
      // }
      if (this.form.enterTime) {
        var arr = this.form.enterTime.map((item) => {
          return moment(item).format("YYYY-MM-DD");
        });
        arr = [{ enterTime: arr[0] }, { leftTime: arr[1] }];
        obj = [...obj, ...arr];
      }
      this.$emit("sendForm", obj);
    },
  },
};
</script>

<style lang="less" scoped>
.hotelSearch {
  .btnTop {
    margin-top: 10px;
  }
}
</style>